<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录注册 - 乒乓球培训管理系统</title>
  <link rel="stylesheet" href="../assets/css/common.css">
  <style>
    body {
      background: linear-gradient(135deg, #ff7700, #ffa64d);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .auth-container {
      background: white;
      border-radius: 8px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      width: 100%;
      max-width: 400px;
    }

    .auth-header {
      background: var(--primary-color);
      color: white;
      padding: 30px 20px;
      text-align: center;
    }

    .auth-header h1 {
      font-size: 24px;
      margin-bottom: 8px;
    }

    .auth-header p {
      opacity: 0.9;
      font-size: 14px;
    }

    .auth-tabs {
      display: flex;
      background: #f8f9fa;
    }

    .auth-tab {
      flex: 1;
      padding: 12px;
      text-align: center;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;
    }

    .auth-tab.active {
      background: white;
      color: var(--primary-color);
      font-weight: 600;
    }

    .auth-form {
      padding: 30px 20px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-control {
      padding: 12px;
      font-size: 16px;
      border: 2px solid #e9ecef;
      border-radius: 6px;
    }

    .form-control:focus {
      border-color: var(--primary-color);
    }

    .btn-auth {
      width: 100%;
      padding: 12px;
      font-size: 16px;
      font-weight: 600;
      border-radius: 6px;
      margin-bottom: 15px;
    }

    .role-selector {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 20px;
    }

    .role-item {
      padding: 12px;
      border: 2px solid #e9ecef;
      border-radius: 6px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .role-item.selected {
      border-color: var(--primary-color);
      background: #fff5e6;
      color: var(--primary-color);
    }

    .role-item:hover {
      border-color: var(--primary-light);
    }

    .password-requirements {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 5px;
    }

    .demo-accounts {
      background: #f8f9fa;
      padding: 15px;
      border-radius: 6px;
      margin-top: 20px;
    }

    .demo-accounts h4 {
      font-size: 14px;
      margin-bottom: 10px;
      color: var(--text-secondary);
    }

    .demo-account {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid #e9ecef;
    }

    .demo-account:last-child {
      border-bottom: none;
    }

    .demo-account span {
      font-size: 12px;
      color: var(--text-muted);
    }

    .demo-login {
      background: none;
      border: none;
      color: var(--primary-color);
      font-size: 12px;
      cursor: pointer;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <div class="auth-container">
    <div class="auth-header">
      <h1>🏓 乒乓球培训管理系统</h1>
      <p>专业的培训机构管理平台</p>
    </div>

    <div class="auth-tabs">
      <button class="auth-tab active" onclick="switchTab('login')">登录</button>
      <button class="auth-tab" onclick="switchTab('register')">注册</button>
    </div>

    <!-- 登录表单 -->
    <div id="loginForm" class="auth-form">
      <form onsubmit="handleLogin(event)">
        <div class="form-group">
          <label class="form-label">用户名</label>
          <input type="text" class="form-control" name="username" placeholder="请输入用户名" required>
        </div>
        
        <div class="form-group">
          <label class="form-label">密码</label>
          <input type="password" class="form-control" name="password" placeholder="请输入密码" required>
        </div>

        <button type="submit" class="btn btn-primary btn-auth">登录</button>
      </form>

      <div class="demo-accounts">
        <h4>演示账户</h4>
        <div class="demo-account">
          <span>超级管理员: admin / admin123</span>
          <button class="demo-login" onclick="quickLogin('admin', 'admin123', 'super_admin')">快速登录</button>
        </div>
        <div class="demo-account">
          <span>校区管理员: manager1 / manager123</span>
          <button class="demo-login" onclick="quickLogin('manager1', 'manager123', 'campus_admin')">快速登录</button>
        </div>
        <div class="demo-account">
          <span>学员: student1 / student123</span>
          <button class="demo-login" onclick="quickLogin('student1', 'student123', 'student')">快速登录</button>
        </div>
        <div class="demo-account">
          <span>教练: coach1 / coach123</span>
          <button class="demo-login" onclick="quickLogin('coach1', 'coach123', 'coach')">快速登录</button>
        </div>
      </div>
    </div>

    <!-- 注册表单 -->
    <div id="registerForm" class="auth-form" style="display: none;">
      <form onsubmit="handleRegister(event)">
        <div class="form-group">
          <label class="form-label">注册身份</label>
          <div class="role-selector">
            <div class="role-item selected" data-role="student" onclick="selectRole('student')">
              <div>👨‍🎓 学员</div>
            </div>
            <div class="role-item" data-role="coach" onclick="selectRole('coach')">
              <div>👨‍🏫 教练</div>
            </div>
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">用户名</label>
          <input type="text" class="form-control" name="username" placeholder="请输入用户名" required>
        </div>

        <div class="form-group">
          <label class="form-label">密码</label>
          <input type="password" class="form-control" name="password" placeholder="8-16位，含字母数字特殊字符" required>
          <div class="password-requirements">密码要求：8-16位，必须包含字母、数字和特殊字符</div>
        </div>

        <div class="form-group">
          <label class="form-label">确认密码</label>
          <input type="password" class="form-control" name="confirmPassword" placeholder="请再次输入密码" required>
        </div>

        <div class="form-group">
          <label class="form-label">真实姓名</label>
          <input type="text" class="form-control" name="realName" placeholder="请输入真实姓名" required>
        </div>

        <div class="row">
          <div class="col-6">
            <div class="form-group">
              <label class="form-label">性别</label>
              <select class="form-control form-select" name="gender" required>
                <option value="">请选择</option>
                <option value="male">男</option>
                <option value="female">女</option>
              </select>
            </div>
          </div>
          <div class="col-6">
            <div class="form-group">
              <label class="form-label">年龄</label>
              <input type="number" class="form-control" name="age" placeholder="年龄" min="6" max="80" required>
            </div>
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">校区</label>
          <select class="form-control form-select" name="campus" required>
            <option value="">请选择校区</option>
            <option value="center">中心校区</option>
            <option value="east">东区分校</option>
            <option value="west">西区分校</option>
            <option value="south">南区分校</option>
          </select>
        </div>

        <div class="form-group">
          <label class="form-label">手机号</label>
          <input type="tel" class="form-control" name="phone" placeholder="请输入手机号" required>
        </div>

        <div class="form-group">
          <label class="form-label">邮箱（可选）</label>
          <input type="email" class="form-control" name="email" placeholder="请输入邮箱">
        </div>

        <!-- 教练特有字段 -->
        <div id="coachFields" style="display: none;">
          <div class="form-group">
            <label class="form-label">教练照片</label>
            <input type="file" class="form-control" name="photo" accept="image/*">
          </div>
          
          <div class="form-group">
            <label class="form-label">比赛成绩描述</label>
            <textarea class="form-control" name="achievements" rows="3" placeholder="请描述您的比赛经历和获奖情况"></textarea>
          </div>
        </div>

        <button type="submit" class="btn btn-primary btn-auth">注册</button>
      </form>
    </div>
  </div>

  <script src="../assets/js/common.js"></script>
  <script>
    let selectedRole = 'student';

    function switchTab(tab) {
      // 切换标签样式
      document.querySelectorAll('.auth-tab').forEach(t => t.classList.remove('active'));
      event.target.classList.add('active');

      // 切换表单显示
      document.getElementById('loginForm').style.display = tab === 'login' ? 'block' : 'none';
      document.getElementById('registerForm').style.display = tab === 'register' ? 'block' : 'none';
    }

    function selectRole(role) {
      selectedRole = role;
      document.querySelectorAll('.role-item').forEach(item => {
        item.classList.remove('selected');
      });
      document.querySelector(`[data-role="${role}"]`).classList.add('selected');

      // 显示/隐藏教练特有字段
      const coachFields = document.getElementById('coachFields');
      coachFields.style.display = role === 'coach' ? 'block' : 'none';
    }

    function quickLogin(username, password, role) {
      // 模拟登录成功
      Utils.showMessage('登录成功！', 'success');
      
      setTimeout(() => {
        // 根据角色跳转到对应页面
        const rolePages = {
          'super_admin': 'super-admin.html',
          'campus_admin': 'campus-admin.html',
          'student': 'student.html',
          'coach': 'coach.html'
        };
        
        // 通知父窗口切换页面
        if (window.parent && window.parent.switchPage) {
          window.parent.switchPage(rolePages[role], role);
        } else {
          // 如果是独立访问，直接跳转
          window.location.href = rolePages[role];
        }
      }, 1000);
    }

    function handleLogin(event) {
      event.preventDefault();
      const formData = new FormData(event.target);
      const username = formData.get('username');
      const password = formData.get('password');

      // 简单的模拟登录验证
      const mockUsers = {
        'admin': { password: 'admin123', role: 'super_admin' },
        'manager1': { password: 'manager123', role: 'campus_admin' },
        'student1': { password: 'student123', role: 'student' },
        'coach1': { password: 'coach123', role: 'coach' }
      };

      if (mockUsers[username] && mockUsers[username].password === password) {
        quickLogin(username, password, mockUsers[username].role);
      } else {
        Utils.showMessage('用户名或密码错误', 'error');
      }
    }

    function handleRegister(event) {
      event.preventDefault();
      const formData = new FormData(event.target);
      
      // 验证密码强度
      const password = formData.get('password');
      const confirmPassword = formData.get('confirmPassword');
      
      if (password !== confirmPassword) {
        Utils.showMessage('两次输入的密码不一致', 'error');
        return;
      }

      // 密码强度验证
      const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,16}$/;
      if (!passwordRegex.test(password)) {
        Utils.showMessage('密码不符合要求：8-16位，必须包含字母、数字和特殊字符', 'error');
        return;
      }

      // 模拟注册成功
      if (selectedRole === 'coach') {
        Utils.showMessage('注册申请已提交，请等待校区管理员审核', 'success');
      } else {
        Utils.showMessage('注册成功！请登录', 'success');
      }
      
      setTimeout(() => {
        switchTab('login');
      }, 2000);
    }
  </script>
</body>
</html>
